<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input {
        width: 3em;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        姓：<input v-model="fristName" type="text">+ 名：
        <input v-model="lastName" type="text">={{fullName}}
        <br><br>
        <button @click="fullName='神戸Shio'">改名卡</button>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fristName: '',
                lastName: ''
            },
            methods: {},
            computed: {
                fullName: {
                    get() {
                        return this.fristName + this.lastName
                    },
                    set(name) {
                        this.fristName = name.slice(0, 2)
                        this.lastName = name.slice(2)
                    }
                }
            }
        })
    </script>
</body>

</html>